<template>
  <div id="app">
    <div class="titles">
      <p>我的收藏</p>
    </div>
    <div class="orders">
<!--            {{this.tableData}}-->
      <el-table
          :data="tableData"
          border
          style="width: 100%">
        <el-table-column
            fixed
            prop="bookimg"
            label="书籍图片"
            width="550"
            style="height: 80px">
          <template #default="scope" >
            <img :src="scope.row.bookimg" width="300px" height="200px">
          </template>
        </el-table-column>
        <el-table-column
            prop="name"
            label="书籍名称">
          <template #default="scope">
            {{ scope.row.book.bookname }}
          </template>
        </el-table-column>
        <el-table-column
            prop="name"
            label="价格">
          <template #default="scope">
            {{ scope.row.book.bookprice }}
          </template>
        </el-table-column>
        <el-table-column
            prop="name"
            label="收藏时间">
          <template #default="scope">
            {{ scope.row.collect.date }}
          </template>
        </el-table-column>
        <el-table-column
            label="操作"
            width="100">
          <template  #default="scope">
            <el-button  @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
          </template>

        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import Button from "../../components/Button";

export default {
  name: "MyCollect",
  components: {Button},
  methods: {
    handleClick(row) {
      console.log(row);
      var _this = this;
      axios.get('http://localhost:8082/book-manager/collect/delect?id='+row.collect.id).then(function (resp){
        if (resp.data.flag=='success'){
          _this.$message(resp.data.message)
          location.reload()
        }else{
          _this.$message(resp.data.message)
        }
      })
    }


  },

  created() {
    var vm = this
    axios.get("http://localhost:8082/book-manager/collect/select?userid=" + this.$store.getters.getUser.userid).then(function (resp) {
      console.log(resp.data)
      vm.tableData = resp.data
    })
  },

  data() {
    return {
      tableData: [
        {
          "book": {
            "bookid": 111113,
            "bookname": "鸟哥的 Linux 私房菜",
            "booktype": "技术",
            "ebookaddress": "http://file.mataiji.top/2021-03-091617195865341.pdf",
            "isfree": 1,
            "isentity": null,
            "howintegral": 0,
            "bookprice": 0
          },
          "bookimg": "https://img.alicdn.com/imgextra/i3/2200776705531/O1CN01sH9kwz1qjF9xEy1z1_!!2200776705531-0-scmitem6000.jpg",
          "collect": {
            "id": 2,
            "userid": 1111,
            "bookid": 111113,
            "date": null
          }
        }
      ]
    }
  }
}
</script>

<style scoped>
#app {
  padding-left: 0;
  width: 100%;
}

.titles {
  height: 60px;
  background-color: white;
  color: black;
  padding: 0;
  text-align: left;
  margin-top: 30px;

}

.titles p {
  padding-top: 20px;
  margin-left: 0;
  margin-left: 10px;
  font-size: 20px;
  vertical-align: middle;
}

.orders {
  background-color: white;
  text-align: center;
}

.order {
  border: 1px solid red;
  margin: 0 auto;
  margin-top: 30px;
  width: 98%;
}

.order p {
  background-color: #B3C0D5;
}

.orderTable {
  height: 40px;
  padding-top: 30px;
  border: 1px solid black;
  margin: 0 auto;
  margin-top: 30px;
  width: 98%;
}
</style>
